<template>
  <div class="login">
    <!--    <div class="team-name "><img src="@/assets/image/login/team-name.png" alt="logo"></div>-->
    <div class="form-box" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0)">
      <div class="title"><h1 title="cms">C CMS</h1></div>
      <form class="login-form" autocomplete="off" @submit.prevent="throttleLogin">
        <div class="form-item nickname">
          <span class="icon"></span>
          <input type="text" v-model="form.enterpriseId" aria-placeholder="请填写企业ID" placeholder="请输入企业ID"/>
        </div>
        <div class="form-item nickname">
          <span class="icon"></span>
          <input type="text" v-model="form.username" aria-placeholder="请填写用户名" placeholder="请输入用户名"/>
        </div>
        <div class="form-item password">
          <span class="icon"/>
          <input type="password" v-model="form.password" autocomplete="off" placeholder="请填写用户登录密码"/>
        </div>
        <button class="submit-btn" type="submit">登录</button>
      </form>
    </div>

  </div>
</template>

<script>

import { mapActions, mapMutations } from 'vuex'
import { SET_USER_MENUS, SET_USER_PERMISSIONS } from '@/store/mutations-types'
import Login from '@/model/login'
import Util from '@/ck/util/util'

export default {
  name: 'login',
  data () {
    return {
      loading: false, // 加载动画
      wait: 2000, // 2000ms之内不能重复发起请求
      throttleLogin: null, // 节流登录,
      form: {
        enterpriseId: '',
        username: '',
        password: ''
      },
    }
  },
  methods: {
    async login () {
      this.loading = false
      this.$router.push('/about')
      this.loading = true
      // const {
      //   enterpriseId,
      //   username,
      //   password
      // } = this.form
      // const form = this.form
      // try {
      //   this.loading = true
      //   const user = await Login.getToken(enterpriseId, username, password)
      //   await this.getInformation(user)
      //   this.loading = false
      //   await this.$router.push('/about')
      //   this.$message.success('登录成功')
      // } catch (e) {
      //   this.loading = false
      // }
    },
    async getInformation (user) {
      try {
        const side = await Login.getMenuBar()
        this.setUserAndState(user)//保存用户信息及更新登录状态
        this.setUserPermissions(user.ButtonJurisdiction)
        this.setUserMenus(side)

      } catch (e) {
        console.log(e)
      }
    },
    ...mapActions(['setUserAndState']),// 将 `this.setUserAndState()` 映射为 `this.$store.dispatch('setUserAndState')`
    ...mapMutations({
      setUserPermissions: SET_USER_PERMISSIONS,
      setUserMenus: SET_USER_MENUS,
    }),

  },
  created () {
    // TODO 节流登录
    this.throttleLogin = Util._throttle(this.login, this.wait)
  }

}
</script>

<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  background-size: auto;
  background: #1b2c5f url('../../assets/image/login/login-ba.png') no-repeat center center;

  .team-name {
    position: fixed;
    left: 40px;
    top: 50%;
    width: 50px;
    transform: translateY(-50%);
  }

  .form-box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 445px;

    .title {
      height: 37px;
      font-size: 30px;
      line-height: 37px;
      margin-bottom: 15%;

      h1 {
        padding-left: 74px;
        box-sizing: border-box;
        text-align: left;
        color: #8c98ae;
      }
    }

    .login-form {
      width: 100%;

      .form-item {
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        padding-bottom: 14px;
        margin-bottom: 34px;

        input {
          width: 100%;
          height: 100%;
          background: transparent;
          color: #c4c9d2;
          font-size: 14px;
          padding-left: 74px;
          box-sizing: border-box;
        }
      }

      .form-item.nickname {
        background: url('../../assets/image/login/nickname.png') no-repeat;
        background-size: 100% auto;
        background-position: left bottom;
      }

      .form-item.password {
        background: url('../../assets/image/login/password.png') no-repeat;
        background-size: 100% auto;
        background-position: left bottom;
      }

    }

    .submit-btn {
      width: 100%;
      height: 70px;
      color: #c4c9d2;
      font-size: 16px;
      text-align: left;
      box-sizing: border-box;
      padding: 0 10px;
      padding-left: 74px;
      background: url('../../assets/image/login/login-btn.png') no-repeat;
      background-size: 90% auto;
      background-position: center bottom;
      border: none;
      cursor: pointer;
    }
  }
}

</style>

